<template>
	<view class="video-explain">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">平台教程</text>
			<text class="subtitle">快速掌握平台使用技巧</text>
		</view>
		
		<!-- 视频列表 -->
		<view class="video-list">
			<view class="video-item" v-for="(item, index) in videoList" :key="index" @click="playVideo(item)">
				<image class="video-cover" :src="item.cover" mode="aspectFill"></image>
				<view class="video-info">
					<text class="video-title">{{item.title}}</text>
					<text class="video-desc">{{item.description}}</text>
					<view class="video-meta">
						<text class="duration">{{item.duration}}</text>
						<text class="views">{{item.views}}次观看</text>
					</view>
				</view>
				<view class="play-icon">
					<text class="iconfont icon-play"></text>
				</view>
			</view>
		</view>
		
		<!-- 视频播放弹窗 -->
		<uni-popup ref="videoPopup" type="center">
			<view class="video-popup">
				<video 
					:src="currentVideo.url" 
					:poster="currentVideo.cover"
					controls
					class="video-player"
				></video>
				<view class="video-popup-info">
					<text class="popup-title">{{currentVideo.title}}</text>
					<text class="popup-desc">{{currentVideo.description}}</text>
				</view>
				<view class="close-btn" @click="closeVideo">
					<text class="iconfont icon-close"></text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentVideo: {},
				videoList: [
					{
						title: '平台基础操作指南',
						description: '了解平台的基本功能和操作流程',
						cover: '/static/video/cover1.jpg',
						url: '/static/video/video1.mp4',
						duration: '05:30',
						views: '1.2万'
					},
					{
						title: '高级功能使用教程',
						description: '掌握平台的高级功能和技巧',
						cover: '/static/video/cover2.jpg',
						url: '/static/video/video2.mp4',
						duration: '08:45',
						views: '8.5千'
					},
					{
						title: '常见问题解决方案',
						description: '解决使用过程中遇到的常见问题',
						cover: '/static/video/cover3.jpg',
						url: '/static/video/video3.mp4',
						duration: '06:15',
						views: '5.6千'
					}
				]
			}
		},
		methods: {
			playVideo(video) {
				this.currentVideo = video;
				this.$refs.videoPopup.open();
			},
			closeVideo() {
				this.$refs.videoPopup.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
.video-explain {
	min-height: 100vh;
	background-color: #f5f6fa;
	padding: 20rpx;
	
	.header {
		padding: 40rpx 20rpx;
		text-align: center;
		
		.title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 10rpx;
		}
		
		.subtitle {
			font-size: 28rpx;
			color: #666;
		}
	}
	
	.video-list {
		.video-item {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			padding: 20rpx;
			display: flex;
			position: relative;
			box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.05);
			
			.video-cover {
				width: 240rpx;
				height: 160rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}
			
			.video-info {
				flex: 1;
				
				.video-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
					display: block;
				}
				
				.video-desc {
					font-size: 26rpx;
					color: #666;
					margin-bottom: 20rpx;
					display: block;
				}
				
				.video-meta {
					display: flex;
					align-items: center;
					
					.duration, .views {
						font-size: 24rpx;
						color: #999;
						margin-right: 20rpx;
					}
				}
			}
			
			.play-icon {
				position: absolute;
				right: 20rpx;
				top: 50%;
				transform: translateY(-50%);
				width: 60rpx;
				height: 60rpx;
				background: rgba(0,0,0,0.5);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.iconfont {
					color: #fff;
					font-size: 32rpx;
				}
			}
		}
	}
	
	.video-popup {
		width: 90vw;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		
		.video-player {
			width: 100%;
			height: 500rpx;
		}
		
		.video-popup-info {
			padding: 20rpx;
			
			.popup-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 10rpx;
				display: block;
			}
			
			.popup-desc {
				font-size: 28rpx;
				color: #666;
			}
		}
		
		.close-btn {
			position: absolute;
			right: 20rpx;
			top: 20rpx;
			width: 60rpx;
			height: 60rpx;
			background: rgba(0,0,0,0.5);
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.iconfont {
				color: #fff;
				font-size: 32rpx;
			}
		}
	}
}
</style>